<template>

  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search ref="search" :config="searchConfig" @getHeight="getHeight" @search="search"/>

    <!-- table区域-begin -->
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        v-bind="vexConfig"
        :align="left"
        :checkbox-config="checkboxConfig"
        :loading="loading"
        :height="pageHeight-seachHeight-90"
        :resizable="true"
        :columns="columns"
        :data="dataSource"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :toolbar-config="tableToolbar"
        :showOverflow="true"
        size="mini"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
      >
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button type="primary" @click="stateChange(row)">已处理</a-button>
            <a-button type="primary" @click="downExportXls('sfaVisitFeedback_service')">导出</a-button>
          </div>
        </template>
        <template #urls='{ row }'>
          <viewer :images='row.urls' v-if="row.urls&&row.urls.length">
<!--            <a-avatar shape='square' size='small' :src='row.urls[0]' />-->
            <a-avatar shape='square' size='small' :src='item' icon='user' v-for="(item,index) in row.urls" :key="index" style="margin-right: 4px"/>
          </viewer>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <business-log ref="businessLog"></business-log>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import Bar from '../../../components/chart/TransferBar'
import ACol from 'ant-design-vue/es/grid/Col'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import JDate from '@comp/cn-form/JDate'
import { getAction } from '@api/manage'

export default {
  name: 'SfaTerminalList',
  mixins: [PageListMixin],
  components: {
    AFormItem,
    ACol,
    Bar,
    JTreeSelect,
    JAreaLinkage,
    JDate
  },
  data() {
    return {
      areaLinkage: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      showImg: false,
      too: '',
      description: '工作任务',
      //查询区域
      searchConfig: [
        {
          type: 'input',
          name: 'phone',
          placeholder: '联系方式'
        },
        {
          type: 'date',
          name: 'createDate',
          placeholder: '创建日期'
        },
        {
          type: 'a-select',
          name: 'processState',
          placeholder: '状态',
          option: [
            {
              name: '已处理',
              value: 2
            },
            {
              name: '待处理',
              value: 1
            }]
        },
        {
          type: 'j-select',
          name: 'feedbackType',
          placeholder: '反馈类型',
          dictCode: 'feedback_type',
        },
      ],
      // 表头
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        {
          title: '状态',
          minWidth: 80,
          field: 'processStateStr'
        },
        {
          title: '图片',
          minWidth: 80,
          field: 'urls',
          slots: { default: 'urls' },
        },
        {
          title: '反馈类型',
          minWidth: 80,
          field: 'feedbackTypeStr'
        },
        {
          title: '反馈时间',
          minWidth: 80,
          field: 'createTime'
        },
        {
          title: '姓名',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '反馈内容',
          minWidth: 80,
          field: 'content'
        },
        {
          title: '联系方式',
          minWidth: 80,
          field: 'phone'
        },
        {
          title: '门店编码',
          minWidth:80,
          field: 'clientCode'
        },
        {
          title: '门店名称',
          minWidth:80,
          field: 'clientName'
        },
        {
          title: '处理人',
          minWidth: 80,
          field: 'approveRealName'
        },
        {
          title: '处理时间',
          minWidth: 80,
          field: 'updateTime'
        }
      ],
      isorter: {
        permflag: 'feedback_page_impl'
      },
      url: {
        list: window._CONFIG['domianSfaURL'] + '/feedback/sfaVisitFeedback/findPageList',
        // startOrStopUrl:window._CONFIG['domianSfaURL'] + '/visit/sfaVisitPlan/startOrStop',
        status: window._CONFIG['domianSfaURL'] + '/feedback/sfaVisitFeedback/checkFeedback',
        // exportXlsUrl: window._CONFIG['domianSfaURL'] + "/terminal/SfaTerminal/exportXls"
      }
    }
  },
  methods: {
    stateChange(status) {
      if (!this.url.status) {
        this.$message.error('请设置url.status属性!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')

      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: `处理确认`,
          content: `确认已处理选中建议反馈？`,
          onOk: function () {
            that.loading = true
            getAction(that.url.status, { ids: ids, status }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.loading = false
            })
          }
        })
      }
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>